<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Guess Card</title>
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery.cookie.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/MessageBox.js"></script>
    <style>
      ::-webkit-scrollbar {
        display: none;
      }
      .modal {
        z-index: 99999999;
        padding-right: 0px;
        position: absolute;
        top: 30%;
        margin-top: -7.5r em;
        background: #fff;
        width: 30rem;
        height: 12rem;
        font-size: 1.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 50%;
        margin-left: -15rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
      }
      .modal button {
        margin-right: 0.5rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.6rem;
      }
      .modal-dialog {
        width: 100%;
      }
      .modal-footer {
        text-align: center;
      }
      .modal-header {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 3.2rem;
      }
      body {
      }
      .wrap {
        height: 100vh;
        position: relative;
        text-align: center;
        overflow-y: scroll;
        background-image: url(../static/mobile-bg.jpg);
        background-size: cover;
      }
      #userName,
      #password {
        width: 27.6rem;
        height: 4.5rem;
        background: #f6f6f6;
        box-shadow: inset 0rem 0.4rem 0.6rem 0rem rgba(91, 50, 50, 0.5);
        border-radius: 1.2rem;
        border: none;
        margin-bottom: 1.8rem;
        font-size: 2.5rem;
      }
      .login-btn {
        background-image: url(../static/login-btn-bg.png);
        background-size: cover;
        width: 30.2rem;
        height: 9.4rem;
        margin-bottom: 0.5rem;
      }
      .login-tips {
        font-size: 1.6rem;
        color: #f6f6f6;
        display: flex;
        align-items: center;
      }
      .login-tips img {
        width: 2rem;
        height: 2rem;
        margin-right: 0.4rem;
      }
      .main-logo {
        position: absolute;
        width: 25.8rem;
        height: 13.6rem;
        background-image: url(../static/main-logo.png);
        background-size: cover;
        left: 50%;
        top: 6.2rem;
        margin-left: -12.9rem;
      }
      .logining-btn {
        background-image: url(../static/logining-btn.png);
        background-size: cover;
        width: 30.2rem;
        height: 9.4rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 1.6rem;
        color: #500303;
        display: flex;
        align-items: center;
        text-align: center;
        display: none;
      }
      .footer-text {
        text-align: center;
        background-color: transparent;
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 1.6rem;
        margin-bottom: 1.7rem;
      }
      .footer-link {
        /* 可以添加一些样式来美化链接，例如颜色、文本装饰等 */
        color: #2e44b4; /* 链接的默认颜色 */
        text-decoration: none; /* 移除链接的下划线 */
      }
      .footer-link:hover {
        text-decoration: underline; /* 鼠标悬停时给链接添加下划线 */
      }
    </style>
    <title>页脚超链接</title>
  </head>
  <script>
    !(function (n) {
      var e = n.document,
        t = e.documentElement,
        i = 750,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function () {
          var n = t.clientWidth || 375;
          n > 750 && (n = 750);
          t.style.fontSize = n / d / 4 + "px";
        };
      e.addEventListener &&
        (n.addEventListener(o, a, !1),
        e.addEventListener("DOMContentLoaded", a, !1));
    })(window);
    $(document).ready(function () {
      //捕捉回车动作
      $(document).keyup(function (e) {
        //捕获文档对象的按键弹起事件
        if (e.keyCode == 13) {
          if ($("#userCurrent").text().trim() == "") {
            login();
          }
        }
      });

      // 阻止打开调试窗
      document.onkeydown = function (e) {
        if (e.key === "F12") {
          e.cancelBubble = true;
          e.returnValue = false;
          MessageBox.alert("F12已经禁用了哦");
        }
      };

      // 禁止右键
      document.oncontextmenu = function () {
        return false;
      };
    });

    function startGame() {
      location.href = "/?page=game";
    }

    function login() {
      if (
        $("#userName").val().trim() == "" ||
        $("#password").val().trim() == ""
      ) {
        MessageBox.alert("请填写昵称和密码！");
        return;
      }
      $(".login-btn").hide();
      $(".logining-btn").show();
      $.ajax({
        type: "get",
        url: "/login",
        contentType: "application/json",
        data: {
          user: $("#userName").val().trim(),
          pwd: $("#password").val().trim(),
        },
        dataType: "json",
        async: false,
        success: function (data, status) {
          if (data.code == 0) {
            MessageBox.alert(
              "登录成功，欢迎你，[" + $("#userName").val().trim() + "]"
            );
            $.cookie("userName", $("#userName").val().trim(), "/");
            $.cookie("score", data.score, "/");
            $("#userCurrent").text("当前玩家：" + $("#userName").val().trim());
            $("#loginBox").hide();
            $("#userCurrentBox").show();
            location.href = "/?page=game";
          } else if (data.code == 1) {
            MessageBox.alert("用户名不存在!");
          } else if (data.code == 2) {
            MessageBox.alert("密码输入错误!");
          }
        },
        error: function () {
          $(".login-btn").show();
          $(".logining-btn").hide();
          MessageBox.alert("调用异常，操作失败!");
        },
      });
    }
  </script>
  <body>
    <div class="wrap">
      <div class="content">
        <div class="main-logo"></div>
        <div
          id="loginBox"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 60vh;
          "
        >
          <input
            type="text"
            class="font-16 col-xs-2"
            id="userName"
            style="text-align: center"
            placeholder="请输入昵称"
          />
          <input
            type="password"
            class="font-16 col-xs-2"
            id="password"
            style="text-align: center; margin-top: 5px"
            placeholder="请输入密码"
            autocomplete="off"
            onfocus="this.type='password'"
          />
          <div
            class="login-btn"
            onclick="login()"
            title="未注册用户将自动完成注册！"
          ></div>
          <div class="logining-btn">即将进入游戏…</div>
          <div class="login-tips">
            <img src="../static/tips.png" alt="" />
            新用户将自动完成注册
          </div>
        </div>
        <div
          class="row"
          id="userCurrentBox"
          style="display: none; margin-top: 60vh"
        >
          <span
            id="userCurrent"
            style="color: white; font-weight: bolder; font-size: 40px"
          ></span>
        </div>
      </div>
      <div class="footer-text">
        <a
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
          class="footer-link"
          target="_blank"
        >
          浙ICP备2024085132号
        </a>
      </div>
    </div>
  </body>
</html>
